<template>
  <view class="lt-container">
    
    <view class="bg-layer">
      <view class="bg-grid"></view>
      <text class="bg-watermark">PERSONNEL</text>
      <view class="orbit-ring"></view>
    </view>

    <view class="profile-card">
      <view class="card-deco-top"></view>
      
      <view class="profile-main">
        <view class="avatar-box">
          <view class="avatar-placeholder">DR.</view>
          <view class="avatar-ring"></view>
        </view>
        
        <view class="info-box">
          <view class="user-name">
            <text class="name-en">DOCTOR</text>
            <text class="name-cn">博士</text>
          </view>
          <view class="user-id">ID: 00000001 // RHODES ISLAND</view>
          
          <view class="exp-bar-wrapper">
            <text class="exp-label">LV.120</text>
            <view class="exp-track">
              <view class="exp-fill" style="width: 85%"></view>
            </view>
          </view>
        </view>
        
        <view class="faction-logo">R.I.</view>
      </view>
    </view>

    <view class="stats-panel">
      <view class="stat-item" @click="navTo('/pages/record/history')">
        <text class="stat-num">24</text>
        <text class="stat-label">INTERVIEWS</text>
        <text class="stat-sub">面试记录</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item" @click="navTo('/pages/resume/my-resume')">
        <text class="stat-num">03</text>
        <text class="stat-label">RESUMES</text>
        <text class="stat-sub">我的简历</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-num">98%</text>
        <text class="stat-label">MATCH RATE</text>
        <text class="stat-sub">匹配度</text>
      </view>
    </view>

    <view class="menu-section">
      <view class="section-title">
        <text>SYSTEM ACCESS // 系统功能</text>
        <view class="line"></view>
      </view>

      <view class="menu-list">
        <view 
          class="menu-item" 
          v-for="(item, index) in menuList" 
          :key="index"
          @click="handleMenuClick(item)"
        >
          <view class="item-left">
            <text class="item-icon">{{ item.icon }}</text>
            <text class="item-text">{{ item.title }}</text>
          </view>
          <view class="item-right">
            <text class="item-tag" v-if="item.tag">{{ item.tag }}</text>
            <text class="arrow">></text>
          </view>
          <view class="hover-bg"></view>
        </view>
      </view>
    </view>
    
    <view class="logout-area">
      <button class="btn-logout" @click="handleLogout">
        <text>LOG OUT // 登出系统</text>
      </button>
    </view>

    <view style="height: 160rpx;"></view>

    <LoneTrailTabBar :current="1"></LoneTrailTabBar>

  </view>
</template>

<script>
import LoneTrailTabBarVue from '../../uview-ui/components/LoneTrailTabBar/LoneTrailTabBar.vue';
export default {
 components: {
 		      LoneTrailTabBar: LoneTrailTabBarVue
 		    },
 		    onShow() {
 		      uni.hideTabBar();
 		    },
  data() {
    return {
      menuList: [
        { title: '简历管理 / MY RESUME', icon: 'A', path: '/pages/resume/list', tag: 'UPDATED' },
        { title: '面试题库 / QUESTION BANK', icon: 'B', path: '/pages/question/bank' },
        { title: '收藏岗位 / FAVORITES', icon: 'C', path: '/pages/position/fav' },
        { title: '系统设置 / SETTINGS', icon: 'D', path: '/pages/settings/index' },
        { title: '关于我们 / ABOUT', icon: 'E', path: '/pages/about/index' }
      ]
    }
  },
  onShow() {
    uni.hideTabBar();
  },
  methods: {
    navTo(url) {
      uni.navigateTo({ url });
    },
    handleMenuClick(item) {
      console.log('点击菜单:', item.title);
      uni.navigateTo({
        url: item.path,
        fail: () => {
          uni.showToast({ title: '功能开发中', icon: 'none' });
        }
      });
    },
    handleLogout() {
      uni.showModal({
        title: '警告 / WARNING',
        content: '确定要断开与罗德岛神经网络的连接吗？',
        confirmText: '断开',
        confirmColor: '#9A332D', // 红色
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 清除缓存并跳转登录
            uni.removeStorageSync('token');
            uni.reLaunch({ url: '/pages/index/index' });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
/* === 孤星风格变量 === */
$lt-bg: #E0E2E5;
$lt-card: rgba(255, 255, 255, 0.85);
$lt-text: #1a1a1a;
$lt-sub: #666;
$c-green: #79BBA9;
$c-yellow: #E6A73C;
$c-red: #9A332D;

.lt-container {
  min-height: 100vh;
  background-color: $lt-bg;
  font-family: Helvetica, sans-serif;
  position: relative;
  color: $lt-text;
  overflow-x: hidden;
}

/* === 背景层 === */
.bg-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-grid {
  width: 100%; height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40rpx 40rpx;
}
.bg-watermark {
  position: absolute; top: 100rpx; right: -60rpx;
  font-size: 140rpx; font-weight: 900; color: rgba(0,0,0,0.04);
  transform: rotate(90deg);
}
.orbit-ring {
  position: absolute; top: 20%; left: -20%;
  width: 600rpx; height: 600rpx;
  border: 2rpx solid rgba(255,255,255,0.6);
  border-radius: 50%;
}

/* === 档案卡片 === */
.profile-card {
  margin: 40rpx 30rpx;
  background: $lt-card;
  backdrop-filter: blur(10px);
  position: relative;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
  /* 孤星切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30rpx), calc(100% - 30rpx) 100%, 0 100%);
}
.card-deco-top {
  position: absolute; top: 0; left: 0; width: 100%; height: 6rpx;
  background: linear-gradient(90deg, $c-green 30%, transparent 30%);
}

.profile-main {
  display: flex; align-items: center;
}

/* 头像 */
.avatar-box {
  width: 120rpx; height: 120rpx;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-right: 30rpx;
}
.avatar-placeholder {
  width: 100%; height: 100%; background: #333; color: $c-green;
  font-weight: bold; font-size: 32rpx; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.avatar-ring {
  position: absolute; width: 140rpx; height: 140rpx;
  border: 2rpx dashed $c-green; border-radius: 50%;
  animation: spin 10s linear infinite;
}

/* 用户信息 */
.info-box { flex: 1; }
.user-name { display: flex; align-items: baseline; margin-bottom: 8rpx; }
.name-en { font-size: 36rpx; font-weight: 900; margin-right: 10rpx; letter-spacing: 2rpx; }
.name-cn { font-size: 24rpx; color: $lt-sub; font-weight: bold; }
.user-id { font-size: 20rpx; color: $lt-sub; font-family: monospace; margin-bottom: 10rpx; }

/* 经验条 */
.exp-bar-wrapper { display: flex; align-items: center; }
.exp-label { font-size: 20rpx; font-weight: bold; color: $c-yellow; margin-right: 10rpx; font-family: monospace; }
.exp-track { flex: 1; height: 8rpx; background: rgba(0,0,0,0.1); transform: skewX(-20deg); }
.exp-fill { height: 100%; background: $c-yellow; }

.faction-logo {
  position: absolute; right: 40rpx; top: 40rpx;
  font-size: 60rpx; font-weight: 900; color: rgba(0,0,0,0.05);
  font-family: monospace;
}

/* === 数据仪表盘 === */
.stats-panel {
  margin: 0 30rpx 40rpx;
  background: rgba(255,255,255,0.6);
  padding: 30rpx 0;
  display: flex; justify-content: space-around; align-items: center;
  border: 1px solid rgba(255,255,255,1);
}
.stat-item {
  display: flex; flex-direction: column; align-items: center;
}
.stat-num { font-size: 40rpx; font-weight: 900; color: $lt-text; line-height: 1; }
.stat-label { font-size: 16rpx; color: $c-green; letter-spacing: 1rpx; font-weight: bold; margin: 4rpx 0; }
.stat-sub { font-size: 20rpx; color: $lt-sub; }
.stat-divider { width: 2rpx; height: 40rpx; background: rgba(0,0,0,0.1); }

/* === 菜单列表 === */
.menu-section { margin: 0 30rpx; }
.section-title {
  display: flex; align-items: center; margin-bottom: 20rpx;
  font-size: 24rpx; font-weight: bold; color: $lt-sub; letter-spacing: 2rpx;
}
.line { flex: 1; height: 2rpx; background: rgba(0,0,0,0.1); margin-left: 20rpx; }

.menu-list {
  background: $lt-card;
  /* 切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%);
}
.menu-item {
  padding: 30rpx 40rpx;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
  transition: all 0.2s;
}
.menu-item:active {
  background: #fff;
  padding-left: 50rpx; /* 点击位移 */
}
.item-left { display: flex; align-items: center; z-index: 2; }
.item-icon { 
  width: 40rpx; font-family: monospace; font-weight: bold; color: $c-green; 
  margin-right: 20rpx; font-size: 28rpx;
}
.item-text { font-size: 28rpx; font-weight: bold; color: $lt-text; }

.item-right { display: flex; align-items: center; z-index: 2; }
.item-tag { 
  font-size: 18rpx; background: $c-red; color: #fff; 
  padding: 2rpx 8rpx; margin-right: 10rpx; border-radius: 2rpx; 
}
.arrow { font-family: monospace; color: $c-green; font-weight: bold; }

/* === 退出按钮 === */
.logout-area {
  margin: 60rpx 30rpx;
}
.btn-logout {
  background: transparent;
  border: 2rpx solid $c-red;
  color: $c-red;
  font-weight: bold;
  font-size: 28rpx;
  height: 90rpx;
  display: flex; align-items: center; justify-content: center;
  /* 按钮切角 */
  clip-path: polygon(20rpx 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%, 0 20rpx);
}
.btn-logout:active {
  background: $c-red; color: #fff;
}

@keyframes spin { 
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
</style>